const device_page = {
    name:'device_page',
    template: `<div class="bodypd wh100 ovy ffa">
        <div class="w100 pdtb10" name="list">
        	<div class="flex flw pd010 bbx">
	        	<div v-for="(v,k) in list" class="w50p bbx pd05 pdtb5">
	                <div class="flex w100">
	                    <a class="w100" >
	                        <div class="h185 bgce br2 ovh pr ">
	                            <div class="h0"></div>
	                            <div class="h101 bbx pd5 pr" @click="showCommand(v,k)">
	                                <img :src="v.avatar" class="wh100 cover bbx bgf">
	                                <!--<div class="pa t0 l0 wh100 flec center ">
	                            		<div class="fs12">
	                            			<span >设备ID</span>
	                            			<span v-text="v.device_id"></span>
	                            		</div>
	                            	</div>-->
	                            	<div class="pa t0 l0 r0 pd10 flec fs12">
	                            		<div class="h30 flec">
	                            			<span v-if="v.status == 0" class="cr">离线</span>
	                            			<span v-if="v.status == 1" class="cg">在线</span>
	                            		</div>
	                            	</div>
	                            </div>
	                            <div class="h75 pdtb5 center marb10">
	                                <div class="fs13 fsw7 w100 txt lh20 bbx  title pd05 tbm" v-text="v.name"></div>
	                            </div>
	                        </div>
	                    </a>
	                </div>
	            </div>
        	</div>
            
        </div>
        
        <div class="h20"></div>
        <div class="pf b0 l0 r0 ofh trs2 bg03 pd010" :class="[showAction? 'h400' : 'h0']">
        	<div class="wh100 bbx " v-if="device">
        		<div class="h5 flec"><div class="bb1c w100"></div></div>
        		<div class="h40 bb1c flex bgf">
        			<div class="flex1 flec pd05"><span v-text="device.name"><span></div>
        			<div class="w40 h100 btn bgf7" @click="cancelCmd()">
        				<div>
        					<span class="fa fa-angle-down"></span>
        				</div>
        			</div>
        		</div>
        		<div class="w100 h300 bgf ovy pd05 bbx">
        			<div class="cmd">
        				<div class="h40 flec"><span>选择命令</span></div>
        				<div class="h35 w100 bbx bd1c hovbdci">
        					<select class="wh100 bdn" v-model="commandName" @change="setCmdVal()">
        						<option v-for="(v,k) in command" :value="v.name" v-text="v.label"></option>
        					<select>
        				</div>
        			</div>
        			<div class="cmdVal">
        				<div class="h40 flec"><span>设置命令</span></div>
        				<div v-for="(v,k) in command" v-if="v.name == commandName">
	        				<div v-if="v.type == 'select'" class="h35 w100 bbx bd1c hovbdci">
	        					<select class="wh100 bdn" v-model="v.v">
	        						<option v-for="(a,b) in v.options" :value="a.v" v-text="a.k"></option>
	        					<select>
	        				</div>
	        				<div v-if="v.type == 'int'" class="h35 w100 ofh bbx bd1c hovbdci">
	        					<input type="number" v-model="v.v" class="wh100 bdn bbx bga pd05" />
	        				</div>
        				</div>
        				
        			</div>
        			<div name="submit">
        				<div class="h20"></div>
        				<div class="h35 bgco cfff btn center" @click="sendCmd()">
        					<span>发送命令</span>
        				</div>
        			</div>
        		</div>
        		<div class="w100 h60 bgf"></div>
        	</div>
        </div>
    </div>`,
    data: function () {
    	return {
	        banner:[],
	        column:[],
	        top:[],
	        news:[],
	        list:[],
	        showAction: false,
	        command: [
	        	{label: '开关', name: 'onoff', v: -1,val:(v)=>{return v > -1;}, type: 'select', options:[{k:'开启',v:1},{k:'关闭',v:0}]},
	        	{label: '购买时长(天)', name: 't_day', v: 0, type: 'int', val:(v)=>{return v > 0;}},
	        	{label: '购买时长(分钟)', name: 'r_time', v: 0, type: 'int', val:(v)=>{return v > 0;}},
	        	{label: '使用时长(分钟)', name: 's_time', v: 0, type: 'int', val:(v)=>{return v > 0;}},
	        	{label: '设置温度', name: 'temp', v: 0, type: 'int', val:(v)=>{return v > 0;}},
	        ],
	        commandName: 'onoff',
	        device: null
	    } 
    },
    created() {
        let v= this
        v.getDevList();
    },
    methods: {
    	cancelCmd(){
    		let v = this;
    		v.showAction = false;
    	},
    	setCmdVal(){
    		let v = this;
    		
    	},
    	sendCmd(){
    		let v = this;
    		let cmd = null;
    		for(let i = 0; i < v.command.length; i++) {
    			if(v.commandName == v.command[i].name) {
    				cmd = (v.command[i]);
    			}
    		}
    		if(!cmd) return;
    		console.log('sendCmd',cmd);
    		let isVal = cmd.val(cmd.v);
    		if(!isVal) {
    			__message('无效的命令值..',3000,'co');
    			return;
    		}
    		let uri = 'api/doctor/device/cmd';
			let dt = {
				device_id: v.device.device_id,
				name: v.commandName,
				value: cmd.v,
				btoken:__gls('btoken'),
			}
			__post({url: uri, data: dt, method:'GET'}).then(r => {
				if (r.code == 200) {
					__message(r.msg,5000,'cg');
				} else {
					__message(r.msg,5000,'cr');
				}
			}).catch(e =>{ console.log(e);})
    	},
        getDevList(){
            let v = this;
            let uri = 'api/doctor/device/list';
			let dt = {
				btoken:__gls('btoken'),
			}
			__post({url: uri, data: dt, method:'GET'}).then(r => {
				if (r.code == 200) {
					let a = [];
					let l = r.data.list || [];
					v.list = l;
					console.log('getDevList', r)
				} else {
					__message(r.msg,5000,'cr');
				}
			}).catch(e =>{ console.log(e);})
        },
        showCommand(i,k) {
        	let v = this;
        	v.device = __copy(i);
        	v.setCmdVal();
        	v.showAction = true;
        }
    },
}
export default device_page